<template>
  <header class="v-window-title" ref="headerRef">
    <div>
      <slot name="head">{{ title }}</slot>
    </div>
    <!-- <button class="v-headerbtn" @click="win_refresh"
        ><el-icon><Refresh /></el-icon
      ></button>
      <button v-if="minimize" class="v-headerbtn" @click="win_min"
        ><el-icon> <Minus /> </el-icon
      ></button>
      <button v-if="maxmize" class="v-headerbtn" @click="win_max"
        ><el-icon> <FullScreen /> </el-icon
      ></button> -->
    <button v-if="closable" class="v-headerbtn" type="button" @click="$emit('close')">
      <el-icon> <Close /> </el-icon>
    </button>
  </header>
  <div :id="bodyId" class="v-window-body">
    <slot />
  </div>
  <footer v-if="$slots.footer" class="v-window-footer">
    <slot name="footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm" :loading="props.loading">保 存</el-button>
    </slot>
  </footer>
  <div v-if="resizable" class="v-window-resizable" @pointerdown="MakeResizable"></div>
</template>

<script lang="ts" setup>
  import { computed, inject, ref } from 'vue'
  import { dialogInjectionKey } from './constants'
  import { windowProps } from './vwindowProps'
  import { useDraggable } from '@v-model/shared--hooks'
  import { useVwindow } from './use-window'
  import { dialogContentEmits } from './v-content'

  const props = defineProps(windowProps)
  defineOptions({ name: 'vContent' })
  defineEmits(dialogContentEmits)

  const { dialogRef, headerRef, bodyId } = inject(dialogInjectionKey)!

  const draggable = computed(() => props.draggable)

  const { confirm, cancel, MakeResizable } = useVwindow(props, dialogRef)

  useDraggable(dialogRef, headerRef, draggable)
</script>

<style lang="scss" scoped>
  .v-window-title {
    height: 30px;
    user-select: none;
    color: var(--v-primary-text-color);
    background: var(--v-primary-backgroud-color);
    //background-color: #409EFF;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 12px;
    font-size: var(--el-font-size-base);
  }
  .v-window-title:hover {
    cursor: move;
  }
  .v-headerbtn {
    border: none;
    background: none;
    outline: none;
    color: #fff;
    cursor: pointer;
  }

  .v-window-body {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 12px;
    overflow: auto;
  }

  .v-window-footer {
    display: flex;
    height: 40px;
    justify-content: center;
    align-items: center;
    margin-right: 8px;

    button {
      min-width: 80px;
    }
  }

  .v-window-resizable {
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 0;
    right: 0;
    background-image: url('');
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-origin: padding-box;
    background-position: 100% 100%;
    padding: 0 0px 0px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: nwse-resize;
    color: aqua;
    z-index: 10;
  }
</style>
